<template>
	<view class="feedBack">
		<view class="title">
			感谢您对我们的服务做出评价
		</view>
		<view class="form-box">
			<view class="title">
				<text class="left">服务态度</text>
			</view>
			<view class="star-box">
				<u-rate :size="size" :activeColor="activeColor" :count="count" :minCount='minCount'
					v-model="params.option1"></u-rate>
				<!-- <text class="msg-text" v-if="msgList[params.option1-1]"> {{msgList[params.option1-1]}}</text> -->
			</view>
		</view>
		<view class="form-box">
			<view class="title">
				<text class="left">响应速度</text>
			</view>
			<view class="star-box">
				<u-rate :size="size" :activeColor="activeColor" :count="count" :minCount='minCount'
					v-model="params.option2"></u-rate>
				<!-- <text class="msg-text" v-if="msgList[params.option2-1]"> {{msgList[params.option2-1]}}</text> -->
			</view>
		</view>
		<view class="form-box">
			<view class="title">
				<text class="left">服务价格</text>
			</view>
			<view class="star-box">
				<u-rate :size="size" :activeColor="activeColor" :count="count" :minCount='minCount'
					v-model="params.option3"></u-rate>
				<!-- <text class="msg-text" v-if="msgList[params.option3-1]"> {{msgList[params.option3-1]}}</text> -->
			</view>
		</view>
		<view class="form-box">
			<view class="title">
				<text class="left">服务质量</text>
			</view>
			<view class="star-box">
				<u-rate :size="size" :activeColor="activeColor" :count="count" :minCount='minCount'
					v-model="params.option4"></u-rate>
				<!-- <text class="msg-text" v-if="msgList[params.option4-1]"> {{msgList[params.option4-1]}}</text> -->
			</view>
		</view>

		<view class="form-box">
			<view class="title">
				<text class="left">其他意见或建议</text>
			</view>
			<textarea v-model="params.option5" placeholder="请输入..."></textarea>
		</view>
		<view class="customizedRoute">
			<view class="customizedRoute-button" @click="feedback">提交</view>
		</view>

		<u-popup :show="show" :round="20" mode="center" @close="close" @open="open">
			<view class="u-popup">
				<image src="../../static/images/index/fkcg.png" mode="aspectFill"></image>
				<view class="popup-title">提交成功</view>
				<view class="popup-content">
					感谢你的反馈，先去看看其他内容吧！
				</view>
				<button @click="gohome">返回首页</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import {
	// 	feedbackApi
	// } from "@/api/index.js"
	export default {
		data() {
			return {
				activeColor: '#fbea4e',
				size: '60rpx',
				count: 5,
				minCount: 1,
				msgList: ['非常不满意', '不满意', '一般', '满意', '非常满意'],
				params: {
					option1: "",
					option2: "",
					option3: "",
					option4: "",
					option5: ""
				},
				show: false
			};
		},
		methods: {
			open() {},
			close() {
				this.show = false
			},
			gohome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			feedback() {
				let that = this
				if (that.params.option1 == "" && that.params.option2 == "" && that.params.option3 == "") {
					uni.showToast({
						title: "请输入反馈内容",
						icon: "none"
					})
					return
				}
				uni.showModal({
					title: '确定提交反馈吗？',
					async success() {
						let res = await that.$u.api.getfeedback(that.params)
						if (res.code == 200) {
							that.params.option1 = "";
							that.params.option2 = "";
							that.params.option3 = "";
							that.params.option4 = "";
							that.params.option5 = "";
							that.show = true
						}
					},
					fail() {
						uni.showToast({
							title: "取消提交",
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedBack {
		min-height: 100vh;
		background-color: #fff;
		padding: 60rpx 100rpx calc(env(safe-area-inset-bottom) + 100rpx);

		.title {
			font-size: 30rpx;
			padding-bottom: 40rpx;
		}

		.form-box {
			width: 100%;

			.star-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 14rpx 40rpx 20rpx;

				.msg-text {
					font-size: 26rpx;
					color: #999;
				}
			}

			.title {
				padding: 0 40rpx;
				position: relative;

				&::before {
					position: absolute;
					content: '';
					display: block;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
					background-color: $overall-color;
					margin-right: 20rpx;
				}

				.left {
					font-size: 32rpx;
				}

				.more {
					font-size: 26rpx;
					color: #999;
				}
			}

			text {
				font-size: 28rpx;
				color: #000000;
			}

			textarea {
				width: 100%;
				background-color: #f6f6f6;
				padding: 40rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				font-size: 28rpx;
				margin-top:50rpx;
			}
		}

		.customizedRoute {
			width: 100%;
			padding: 20rpx 55rpx calc(env(safe-area-inset-bottom) + 10rpx);
			position: fixed;
			bottom: 0;
			left:0;
			background-color: white;

			.customizedRoute-button {
				width: 100%;
				height:80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size:36rpx;
				color: #fff;
				background-color: $overall-color;
				text-align: center;
				box-sizing: border-box;
			}
		}

		.u-popup {
			background: linear-gradient(to bottom, #4881FC, #7dcdfe);
			position: relative;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				top: -50rpx;
				left: 42%;
			}

			.popup-title {
				font-weight: 700;
				font-size: 32rpx;
				text-align: center;
				margin: 50rpx 20rpx 20rpx 20rpx;
			}

			.popup-content {
				font-size: 28rpx;
				text-align: center;
			}

			button {
				width: 190rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin: 0 auto;
				border-radius: 20rpx;
				background-color: #fff;
				color: #4881FC;
				margin-top: 20rpx;
			}
		}
	}
</style>